<template>
    <!--地图容器-->
  <div>
    <div id="XSDFXPage" class="XSDFXPage"></div>
    <div v-if="isEditing">
    <group v-if="address">
      <x-textarea  title="公司地址" v-model="address" style="color:#999;" readonly></x-textarea>
    </group>
    
    <group>
      <x-address :title="title"  v-model="value_0_1" :list="addressData" placeholder="请选择地址" value-text-align="left">
        <template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
          <span :class="props.labelClass" :style="props.labelStyle" style="height:24px;">
            <span class="demo-icon demo-icon-big" style="font-size:20px;vertical-align:middle;"></span>
            <span style="vertical-align:middle;">地址</span>
          </span>
        </template>
      </x-address>
    </group>
    <group title="手动输入↓">
    <input ref="getfocus" v-show="value_0_1.length!=0" type="text" id="autoAddress" name="" style="border:0;width:100%;height:20px;text-align:center;line-height:20px;font-size:15px;color:#999999;" v-model="uaddress" placeholder="详细地址" />
    </group>

    <x-button style="margin-top:20px;" v-if="value_0_1.length!=0" text="使用当前位置"  @click.native="processButton" type="primary"></x-button>

    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

import {XInput,XButton,Group, XAddress, ChinaAddressV4Data,Value2nameFilter as value2name,XTextarea} from 'vux'
export default {
    name:'BaiduMap',
    components:{
      XInput, 
      XButton,
      Group,
      XAddress,
      value2name,
      XTextarea
    },
    computed:{
      ...mapState({
        isEditing:state => state.moduleEdit.isEditing,
      }),
    },
    data () {
      return {
        showMap:false,
        map:'',//创建地图对象
        positions:{
          lng:'',//经度
          lat:'',//纬度
        },
        point:'',
        title:'默认为空',
        value_0_1: [],
        uaddress:'',
        addressData: ChinaAddressV4Data,
        address:'',
        myValue:'',
        local:'',
        marker:'',//地图坐标
      }
    },
    watch:{
      value_0_1:function(val){
        this.address = value2name(val, ChinaAddressV4Data)
        this.uaddress = value2name(val, ChinaAddressV4Data)
        var _this = this
        setTimeout(function(){
          //_this.$refs.getfocus.focus()
        },300) 
      },
      uaddress:function(val){
        this.address =   val
      }
    },
    mounted() {
      this.$nextTick(function () {
      this.createMap()
      })
    },
    methods:{
      createMap(){//创建地图函数
        this.map = new BMap.Map("XSDFXPage");
        let point2 = new BMap.Point(this.positions.lng, this.positions.lat);
        this.map.centerAndZoom(point2,15);
        if(this.positions.lng&&this.positions.lat){
          var _this = this
          _this.getAddress(point2)
          this.addMarker()
        }else{
          let Mycity = new BMap.LocalCity()
          Mycity.get(this.mypop)
        }
      },
      mypop(result){
        //this.positions.lng, this.positions.lat
        this.positions.lng = result.center.lng
        this.positions.lat = result.center.lat
        let cityName = result.name;
        this.map.setCenter(cityName)
        this.addMarker()
        let gc = new BMap.Geocoder();
        var _this = this
        gc.getLocation(result.center, function(rs){
          _this.value_0_1.push(rs.addressComponents.province)
          _this.value_0_1.push(rs.addressComponents.city)
          _this.value_0_1.push(rs.addressComponents.district)
        })
      },
      addMarker(){
        const point = new BMap.Point(this.positions.lng,this.positions.lat);
        this.marker = new BMap.Marker(point,{icon:this.createIcon()});
        this.map.addOverlay(this.marker);
        this.marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        this.marker.addEventListener("click",this.searchRoute)
        //this.map.openInfoWindow(this.infoWindow(),point); //开启信息窗口
      },
      searchRoute(e){
        console.log(this.positions)
      },
      searchRode(start,end,route){
        var driving = new BMap.DrivingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true},policy: 'BMAP_DRIVING_POLICY_LEAST_TIME'});
        driving.search(start,end);
      },
      createIcon(){
        let json={w:36,h:36,l:46,t:21,x:9,lb:12}
        let myIcon = new BMap.Icon("http://wx.jlmgps.com/app/themes/vcard03/static/images/ico_marker.png",new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(0, 0)});
        return myIcon;
      },
      processButton(){
        var _this = this
        _this.$store.commit('moduleEdit/changeAddress',_this.uaddress)
        let myGeo = new BMap.Geocoder();
        myGeo.getPoint(_this.address, function(point){
          if (point) {
            _this.map.centerAndZoom(point, 16)
            let myIcon = _this.createIcon()
            _this.map.clearOverlays()
            _this.marker = new BMap.Marker(point,{icon:myIcon});
            _this.getAddress(point);
            _this.map.addOverlay(_this.marker);
          }else{
            alert("您选择地址没有解析到结果!");
          }
        }, _this.address);
      },
      getAddress(point){
        let gc = new BMap.Geocoder();
        var _this = this             
          gc.getLocation(point, function(rs){
            let addComp = rs.addressComponents;
            let address =  _this.address//获取地址
            let label = new BMap.Label(address,{offset:new BMap.Size(-50,-20)});
            label.setStyle({
               color : "red",
               fontSize : "12px",
               height : "20px",
               border:"0px",
               backgroundColor:"transparent",
               lineHeight : "20px",
               fontFamily:"微软雅黑"
             });
            //_this.map.removeOverlay(_this.marker.getLabel());//删除之前的label 
            _this.marker.setLabel(label);               
          });
      },

    }
}
</script>
<style scoped>
.XSDFXPage{
  overflow:hidden;
  position:relative;
  z-index:0;
  background-color:rgb(243, 241, 236);
  color:rgb(0,0,0);
  text-align:left;
  width: 100%;
  height: 200px;
  font-family: "微软雅黑";
}
</style>